<template>
  <div>
    <el-table
      :data="hisDataList"
      :height="height"
      size="small"
      :header-cell-style="{
        color: '#666',
        backgroundColor: '#f6f6f6',
        borderBottom: 'none',
      }"
      :row-style="tableRowStyle"
    >
      <el-table-column
        v-if="dataTypeShow === 'hour' || dataTypeShow === 'oneHour'"
        prop="waterstation"
        label="水站名称"
        width="180"
        fixed="left"
        align="center"
      ></el-table-column>
      <el-table-column
        v-else
        prop="waterStation"
        label="水站名称"
        width="180"
        fixed="left"
        align="center"
      ></el-table-column>
      <el-table-column
        v-if="dataTypeShow === 'hour' || dataTypeShow === 'oneHour'"
        prop="gmtMonitor"
        label="时间"
        width="160"
        fixed="left"
        align="center"
      ></el-table-column>
      <el-table-column
        v-else
        prop="datatime"
        label="时间"
        width="160"
        fixed="left"
        align="center"
      ></el-table-column>
      <el-table-column
        v-for="(item, index) in factorField"
        :label="item.label"
        min-width="95px"
        :key="index"
        :prop="item.prop"
        align="center"
      >
        <template slot-scope="{ row }">
          <span
            :style="{
              color: isEffective(
                item.prop,
                row[item.prop],
                row[factorStatus[item.devStatus]],
                row.waterQuality,
                item.factorLimit
              ),
            }"
            >{{
              validation(
                item.prop,
                row[item.prop],
                row[factorStatus[item.devStatus]],
                row.waterQuality,
                item.factorLimit
              )
            }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="waterQuality"
        label="水质状态"
        key="waterQuality"
        align="center"
        v-if="type !== 'day'"
      >
        <template slot-scope="{ row }">
          <span
            :style="{ color: row.waterQuality === '超标' ? '#e53139' : '' }"
            >{{ row.waterQuality }}</span
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: [
    "hisDataList",
    "factorField",
    "factorStatus",
    "dataTypeShow",
    "type",
    "standard",
    "height",
  ],
  data() {
    return {};
  },
  methods: {
    tableRowStyle({ rowIndex }) {
      if (rowIndex % 2 > 0) {
        return {
          backgroundColor: "#f6f6f6",
        };
      } else {
        return {
          backgroundColor: "#fff",
        };
      }
    },
    // 设置文本颜色
    isEffective(factor, value, status, waterInfo, factorLimit) {
      if (waterInfo) {
        if (waterInfo === "无水") {
          return "#606266";
        } else {
          switch (Number(status)) {
            case 0:
            case 1:
            case 3:
            case 5:
            case 7:
            case 8:
            case 10:
              return "#606266";
            case 9:
              return "#e53139";
            default:
              break;
          }
        }
      } else {
        if (value) {
          if (factor === "ph") {
            if (
              this.standard["ph"].split("~")[0] <
              value <
              this.standard["ph"].split("~")[1]
            ) {
              return "#606266";
            } else {
              return "#e53139";
            }
          } else {
            if (this.standard[factor] > value) {
              return "#606266";
            } else {
              return "#e53139";
            }
          }
        } else {
          return "#606266";
        }
      }
    },
    // 设置文本值
    validation(factor, value, status, waterInfo, factorLimit) {
      if (waterInfo) {
        if (waterInfo === "无水") {
          return "无水";
        } else {
          switch (Number(status)) {
            case 0:
            case 3:
            case 5:
            case 7:
            case 10:
              return "维护";
            case 1:
              return value.toFixed(3);
            case 4:
              return factorLimit;
            case 8:
              return "-";
            case 9:
              return value.toFixed(3);
            default:
              break;
          }
        }
      } else {
        if (value) {
          return value.toFixed(3);
        } else {
          return "-";
        }
      }
    },
  },
};
</script>

<style>
</style>